<template>
	<el-drawer
		title="订单详情"
		:visible.sync="dialogVisible"
		direction="rtl"
		size="500px"
		append-to-body
		:show-close="false"
		:wrapper-closable="false"
		@mousedown.native="$drawer.getMousedown($event)"
		@mouseup.native="dialogVisible = $drawer.getMouseup($event)"
	>
		<el-popover
			placement="left-start"
			trigger="hover"
			width="200"
			content="按ESC键快捷关闭弹窗"
			class="drawer-close"
		>
			<span slot="reference" @click="dialogVisible = false">
				<i class="el-icon-close icon-common-close"></i>
			</span>
		</el-popover>
		<div class="drawerBody acconutDetails">
			<div v-if="info" class="acconutDetails-content">
				<div class="li">
					<h2 class="li-name">{{ info.card_tem_name }}</h2>
					<div class="li-name">商品ID：{{ info.tem_id }}</div>
					<div class="li-name">订单号：{{ info.id }}</div>
					<div class="li-name">下单时间：{{ info.create_time }}</div>
					<div class="li-name">订单价格(元)：{{ info.card_price }}</div>
					<div class="li-name">付款状态：{{ info.is_pay == '1' ? '已支付' : '未支付' }}</div>
					<div class="li-name">支付方式：{{ info.pay_type == '1' ? '微信' : '后台支付' }}</div>
					<div class="li-name">会员卡ID：{{ info.mem_card_id }}</div>
					<div class="li-name">会员卡姓名：{{ info.card_realname }}</div>
					<div class="li-name">有效期：{{ info.card_long }}天</div>
					<div class="li-name">
						有效次数：{{ info.card_count == '-1' ? '无限制' : `${info.card_count}次` }}
					</div>
					<div class="li-name">课消次数：{{ `${info.used_count || 0}次` }}</div>
					<div class="li-name">
						剩余次数：{{
							info.card_count == '-1' ? '无限制' : `${info.card_count - info.used_count}次`
						}}
					</div>
					<div class="li-name">有效期(天)：{{ info.card_long || '--' }}</div>
					<div class="li-name">支付说明：{{ info.pay_desc || '--' }}</div>
				</div>
			</div>
			<el-empty v-else :image-size="160" style="margin-top: 100px"></el-empty>
		</div>
	</el-drawer>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { getArticleInfo } from '@/api/article.js'
	export default {
		data() {
			return {
				dialogVisible: false,
				info: null
			}
		},
		computed: { ...mapGetters(['userInfo', 'token']) },
		methods: {
			async init(info) {
				this.info = info
				this.dialogVisible = true
			},
			async getDetailInfo(info_id, acname) {
				const loading = this.$loading({
					lock: true,
					text: '数据加载中,请稍等~',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				try {
					const res = await getArticleInfo({ id: info_id })
					res.data.acname = acname
					this.info = res.data
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.acconutDetails {
		&-content {
			.li {
				font-size: 14px;
				padding: 16px;
				background: #f9f8f8;
				border-radius: 4px;
				margin: 0 0 24px 0;
				&-name {
					margin-bottom: 15px;
				}

				&-user {
					display: flex;
					align-items: center;
					color: #4e5969;
				}

				&-content {
					color: #1d2129;
					margin-top: 20px;
					display: flex;
				}
			}
		}
	}
</style>
